<template>
    <div class="frame withdraw">
            <el-dialog
            :title=title
            :visible.sync="show"
            width="440px"
            :before-close="closeFrame"
            >
            <div v-if="!ifpassword" class="content ">
                <div class="content-title">{{unit}}</div>
                <div class="content-notice">
                    <span>{{$t("dt.withdrawnotice1")}}{{$t("dt.withdrawnotice2")}}{{unit}}，{{$t("dt.withdrawnotice3")}}{{coinName}}</span>
                </div>
                <div class="content-input">
                    <div class="sub ">
                        <div class="sub-lable">{{$t("dt.withdrawSend")}}</div>
                        <div class="sub-input flex">
                            <input type="text" :placeholder="this.$t('dt.withdrawSendPlaceholder')"  v-model="quant">
                            <div style="flex:1"></div>
                            <div>{{unit}}</div>
                        </div>
                    </div>
                    <div class="sub ">
                        <div class="sub-lable">{{$t("dt.withdrawSuccessText1")}}</div>
                        <div class="sub-input flex">
                            <input class="disabled" type="text" :placeholder="this.$t('dt.withdrawSuccessText2')+coinName+this.$t('dt.withdrawSuccessText3')"  disabled>
                            <div style="flex:1"></div>
                            <div>{{coinName}}</div>
                        </div>
                    </div>
                      <div class="sub ">
                        <div class="sub-lable">{{$t("dt.shuru1")}}{{coinName}}{{$t("dt.shuru1")}}</div>
                        <div class="sub-input flex">
                            <input type="text" :placeholder="this.$t('dt.shuru1')+coinName+this.$t('dt.shuru2')" v-model="memo">
                            <div style="flex:1"></div>
                        </div>
                    </div>
                </div>
                <div class="content-button">
                    <button @click="withdraw">{{$t("dt.withdraw")}}</button>
                </div>
            </div>
              <div v-else class="password">
                <p>密码</p>
                <input type="password"  placeholder="请输入收款地址" v-model="secret">
                <button @click="confirm">提交</button>
              </div>
        </el-dialog>
      </div>
</template>
<script>
  import {extract} from '../../service/datxService'
  import  {selectOuterDatx} from  '../../service/datxService'
  import {validateSecret,getforNumber} from '../../utils/commonUtils'

  export default{
    data(){
        return{
           title:this.$t('dt.withdrawTitle'),
           ifpassword:false,
           show:true,
           coinName:'',
           from:'',  //提币账户 this.datxDetail.name
           quant:'0.0001 ', //提币资产与数量 '20 DBTC'
           memo:'',  //链外真实的提币地址
           secret:'cm710068' //密码
        }
    },

   props: ["unit"],
   methods:{

        // 转入
        closeFrame(){
           this.$emit('withdrawListen',false)
        },

        withdraw(){
           this.ifpassword=true;
           this.title=this.$t('dt.verificationPassword');
        },

        confirm(){
             if(validateSecret(this.secret)){
               let obj=selectOuterDatx(this.datxDetail.name,this.secret)
               let privateKey=obj.privateKey
               if(privateKey){
                 console.log(this.datxDetail.name,getforNumber(this.quant)+" "+this.unit,this.memo,privateKey)
                 extract(this.datxDetail.name,getforNumber(this.quant)+" "+this.unit,this.memo,privateKey,(erro,data)=>{
                   console.log(erro,data)
                   if(!erro){
                     this.$message.success(this.$t('dt.withdrawSuccess'))
                   }else {
                     this.$message.error(this.$t('dt.withdrawDefault'))
                   }
                 });
               }else {
                 this.$message.error(this.$t('dt.privatekeyNoExist'))
               }
             }else {
               this.$message.error(this.$t('dt.passwordDefaule'))
             }

            this.$emit('withdrawListen',false)
        }
    },
  created(){
      this.datxDetail = JSON.parse(window.sessionStorage.getItem("walletdetail"))
      if( this.unit=='DBTC'){
       this.coinName="BTC"
      }
      else if(this.unit=='DETH'){
        this.coinName="ETH"
      }
      else if(this.unit=='DEOS'){
        this.coinName="EOS"
      }
  }
}
 
</script>
<style lang="less" scoped>
.withdraw{
    .flex{
        display: flex;
    }
    .content{
        .content-title{
            text-align: center;
            color: #98889b;
            font-size: 18px;
        }
        .content-notice{
            font-size: 12px;
            color: #98889b;
            padding: 20px 20px 0;
        }
        .content-input{
            padding: 10px 20px;
            margin-top: 20px;
            background:#fbfbfc;; 
            color: #666666;
            .sub{
                padding-bottom: 20px;
                margin-bottom: 15px; 
                border-bottom: 1px solid #eaedf5;
              &-lable{
                margin-bottom: 15px;
              }
              &-input{
                  line-height: 34px;
              }
            }
            input{
            width: 349px;
            height: 34px;
            display: block;
            padding: 0 10px;
            border-radius: 4px;
            border: solid 1px #eeeeee;
            background-color: #ffffff; 
            }
          .disabled{
            background-color: #f5f7fa;
            border-color: #e4e7ed;
            color: #c0c4cc;
            cursor: not-allowed;
          }
            input::-webkit-input-placeholder {
            font-size: 12px;
            color: #c5c7cb;   
            }
         
         
        }
        .content-button{ 
            margin: 22px 0;
            button{
                color:#fff;
                width: 400px;
                margin:  0 auto;
                display: block;
                border-radius: 4px;
                line-height:32px;
                text-align: center;
                background-color: #98889b;
                outline: none;
                border: none;
                cursor: pointer;
            }
            button:hover{
                opacity: .8;
            }   
        }
    }
    .password{
    padding: 0 20px;
    p{
      color: #666666;
      padding:15px 0;
    }
    input{
      width: 100%;
      height: 34px;
      padding: 0 10px;
      border-radius: 4px;
      border: solid 1px #eeeeee;
      background-color: #ffffff;
    }
    input::-webkit-input-placeholder {
      font-size: 12px;
      color: #c5c7cb;
    }
    button{
      width: 100%;
      margin: 30px 0 10px;
      color: #fff;
      border-radius: 4px;
      text-align: center;
      line-height: 40px;
      background: #98889b;
      outline: none;
      cursor: pointer;
    }
    button:hover{
      opacity: .8;
    }
  }
}
</style>
<style lang="less" >
.frame{
    .el-dialog__wrapper{ 
        .el-dialog{
                    border-radius: 8px;
            }
            .el-dialog__header{
                border-bottom:1px solid #eaedf5;
                color:#000000;
                font-size: 18px;
                font-weight: bold;
                padding:20px;
            }
            .el-dialog__body{
                padding:30px 0;
            }
            .el-dialog__headerbtn .el-dialog__close{
                color: #666666;
                
        }
    }          
}
</style>

